<template>
  <div class="app-container">
    <el-select
      v-if="siteFlag"
      v-model="siteId"
      placeholder="请选择"
      style="margin-bottom:20px;width:400px;"
      @change="siteChange"
    >
      <el-option
        v-for="item in baseOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select v-model="typeValue" placeholder="请选择" style="margin-bottom:20px;">
      <el-option
        v-for="item in typeOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <my-table
      :table-value="tableValue"
      :type-value="typeValue"
      :list-loading="listLoading"
      @refresh="refresh"
      @modify="modify"
    />
  </div>
</template>

<script>
import { adminGetClaimMsg, modifiyClaimMsg, otherGetClaimMsg } from '@/api/claim'
import { queryBase } from '@/api/base'
import MyTable from './components/MyTable'
import store from '@/store'

export default {
  name: 'Claim',
  components: {
    MyTable
  },
  data() {
    return {
      account: store.getters.token,
      role: Number.parseInt(store.getters.role),
      messageList: {},
      tableValue: [],
      listLoading: true,
      baseOptions: [],
      typeOptions: [
        {
          label: '待审核',
          value: 0
        },
        {
          label: '已通过',
          value: 1
        },
        {
          label: '已拒绝',
          value: 2
        }
      ],
      typeValue: 0,
      siteId: 0,
      entId: 0
    }
  },
  computed: {
    siteFlag() {
      return this.role === 0 || this.role === 4
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      if (this.siteFlag) {
        this.getSite()
      } else {
        this.adminGetClaimMsg()
      }
    },
    adminGetClaimMsg() {
      adminGetClaimMsg({ account: this.account })
        .then(response => {
          this.messageList = response
          this.formatTableValue()
          this.listLoading = false
        })
        .catch(error => {
          console.log(error)
        })
    },
    getSite() {
      queryBase({ account: store.getters.token })
        .then(response => {
          console.log(111 + response)
          const base = response.plantation
          const enterprise = response.enterprise
          this.baseOptions = base.map((item, index) => {
            return {
              label: item.siteName,
              value: item.siteId,
              entId: enterprise[index].entId
            }
          })
          if (this.baseOptions.length === 0) {
            this.baseOptions.push({
              label: '暂无基地',
              value: 0,
              entId: 0
            })
          }
          this.siteId = this.baseOptions[0].value
          this.entId = this.baseOptions[0].entId
          if (this.siteId !== 0) {
            this.otherGetClaimMsg()
          }
          this.listLoading = false
        })
        .catch(error => {
          console.log(error)
        })
    },
    otherGetClaimMsg() {
      otherGetClaimMsg({
        siteId: this.siteId,
        entId: this.entId
      })
        .then(response => {
          this.messageList = response
          this.formatTableValue()
          this.listLoading = false
        })
        .catch(error => {
          console.log(error)
        })
    },
    siteChange() {
      this.entId = this.baseOptions.find((item) => {
        return item.value === this.siteId
      }).entId
      this.otherGetClaimMsg()
    },
    refresh() {
      if (this.siteFlag) {
        this.otherGetClaimMsg()
      } else {
        this.adminGetClaimMsg()
      }
    },
    formatTableValue() {
      const messageList = this.messageList
      this.tableValue = [{
        enterprise: messageList.unreadEnterprise,
        site: messageList.unreadPlantation,
        place: messageList.unreadPlace,
        account: messageList.unreadAccount,
        cms: messageList.unreadCms
      }, {
        enterprise: messageList.permitEnterprise,
        site: messageList.permitPlantation,
        place: messageList.permitPlace,
        account: messageList.permitAccount,
        cms: messageList.permitCms
      }, {
        enterprise: messageList.refuseEnterprise,
        site: messageList.refusePlantation,
        place: messageList.refusePlace,
        account: messageList.refuseAccount,
        cms: messageList.refuseCms
      }]
    },
    modify(params) {
      modifiyClaimMsg(params)
        .then(response => {
          this.refresh()
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped>

</style>
